<template>
    <div class="box">
        <div class="block">
            <div class="icon">
                <img src="./assets/必选.png" alt="">
            </div>
            <span class="demonstration">预抵日期</span>
            <el-date-picker v-model="arrive" @change="arriveChange" format="yy-MM-dd 14:mm:ss" type="date"
                placeholder="选择日期" :picker-options="pickerOptions">
            </el-date-picker>
        </div>
        <div class="block">
            <div class="icon">
                <img src="./assets/必选.png" alt="">
            </div>
            <span class="demonstration">入住天数</span>
            <el-input-number v-model="dayNum" @change="dayNumChange" :min="0"></el-input-number>
        </div>
        <div class="block">
            <div class="icon">
                <img src="./assets/必选.png" alt="">
            </div>
            <span class="demonstration">预离日期</span>
            <el-date-picker @change="leaveChange" v-model="leave" format="yy-MM-dd 12:mm:ss" type="date"
                placeholder="选择日期" :picker-options="pickerOptions">
            </el-date-picker>
        </div>
        <div class="block">
            <div class="icon">
                <img src="./assets/必选.png" alt="">
            </div>
            <span class="demonstration aging">保留时效</span>
            <el-date-picker v-model="aging" format="yy-MM-dd 13:mm:ss" type="date"
                placeholder="选择日期" >
            </el-date-picker>
        </div>
    </div>
</template>

<script>
    // 时间戳加减方法
    import {
        dateAdd
    } from './common/date.js'
    import {
        sub
    } from './common/date.js'
    export default {
        data() {
            return {
                arrive: null,
                dayNum: 0,
                leave: null,
                aging: null,
                // 从当天开始选
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7;
                    }
                },
            }
        },
        methods: {
            arriveChange() {
                // 获取保留日期
                if (this.leave != null) {
                    const arrive = +new Date(this.arrive)
                    const leave = +new Date(this.leave)
                    const date = (leave + arrive) / 2
                    this.aging = date
                }
                this.arrive = dateAdd(this.arrive, this.dayNum)
                // 获取入住天数
                let end = this.arrive
                let start = this.leave
                this.dayNum = sub(start, end)
            },
            dayNumChange() {
                let data = this.dayNum + ''
                if (data.trim().indexOf('.') != -1) {
                    this.dayNum = 0
                    this.$message.error('请输入整数');
                }

                this.leave = dateAdd(this.arrive, this.dayNum)

                // 获取保留日期
                if (this.leave != null) {
                    const arrive = +new Date(this.arrive)
                    const leave = +new Date(this.leave)
                    const date = (leave + arrive) / 2
                    this.aging = date
                }
            },
            leaveChange() {
                if (this.arrive != null) {
                    let end = this.arrive
                    let start = this.leave
                    this.dayNum = sub(start, end)
                }
                // 获取保留日期
                if (this.leave != null) {
                    const arrive = +new Date(this.arrive)
                    const leave = +new Date(this.leave)
                    const date = (leave + arrive) / 2
                    this.aging = date
                }
            }
        }
    }
</script>

<style lang="scss">
    .box {
        margin-top: 50px;
        display: flex;
        justify-content: center;
        align-items: center;

        .block {
            margin: 0 6px;

            .icon {
                display: inline;

                img {
                    width: 14px;
                    height: 14px;
                }
            }

            .demonstration {
                margin-right: 7px;
            }
        }
    }
</style>